<template>
  <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
    <div class="infoModal">巡检计划添加</div>
    <a-form-model class="formVideoModel" ref="ruleForm" :model="form" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol" >
      <a-form-model-item label="区县" ref="country"  prop="country">
        <CountySelect :form.sync="form" @update="validateField"></CountySelect>
      </a-form-model-item>
      <a-form-model-item label="所属项目" ref="projectName"  prop="projectName">
        <ContractSelect v-model="form.projectName"  @update="validateFieldContractName"  v-bind:fromCityList="form.projectName"></ContractSelect>
      </a-form-model-item>
      <a-form-model-item label="点位名称" ref="pointName"  prop="pointName">
        <a-input v-model="form.pointName" />
      </a-form-model-item>
      <a-form-model-item label="客户地址" ref="customerArea"  prop="customerArea">
        <a-input v-model="form.customerArea" />
      </a-form-model-item>
      <a-form-model-item label="维护等级" ref="level"  prop="level">
        <a-select v-model="form.level" placeholder="请选择维护等级">
              <a-select-option value="普通">普通</a-select-option>
              <a-select-option value="A">A</a-select-option>
              <a-select-option value="AA">AA</a-select-option>
              <a-select-option value="AAA">AAA</a-select-option>
            </a-select>
      </a-form-model-item>
      <a-form-model-item label="计划巡检时间" >
        <a-date-picker v-model="form.checkTime" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" placeholder="选择时间" style="width:100%;" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 20, offset: 10}">
        <a-button type="primary" @click="onSubmit">
          提交
        </a-button>
        <a-button style="margin-left: 10px;" @click="cancelEvent">
          取消
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import { addInspection} from '@/api/video'
import CountySelect from '@/views/videoManage/util/countySelect'
import ContractSelect from '@/views/videoManage/util/contractSelect'
export default {
  components: { CountySelect,ContractSelect},
  data() {
    return {
     
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {projectName:''},
      rules: {
        country: [{ required: true, message: '请选择区县', trigger: 'change' }],
        customerArea: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        level: [{ required: true, message: '请选择维护等级', trigger: 'change' }],
        name: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        pointName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        checkTime: [{ required: true, message: '请选择时间', trigger: 'change' }],      
      },
    }
  },
  created(){
    Object.keys(this.form).forEach((key) => (this.form[key] = ''))
  },
  methods: {
     //手动再验证
    validateField(e) {
      this.form.country = e
      this.$refs.ruleForm.validateField('country')
    },
    validateFieldContractName(name){
      this.form.projectName =name
      this.$refs.ruleForm.validateField('projectName')
     },
    onChange(value, dateString) {
      this.form.checkTime = dateString
    },
    //提交
    onSubmit() {
       this.$refs.ruleForm.validate((valid) => {
        if (valid) {  
            let form =JSON.parse(JSON.stringify(this.form))
            form.checkTime =this.dataFunction(this.renderTime(form.checkTime))   
            addInspection(form).then((response) => {
              if (response != undefined) {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '添加成功!',
                    duration: 3,
                  })
                  this.$emit('successEvent')
                }
              }
            })
           
        } else {
          return false
        }
      })
    },
    cancelEvent() {
      this.$emit('cancelEvent')
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    dataFunction(dataTime) {
      var date = new Date(dataTime)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
    },
  },
}
</script>
